<html>
<head>
    <script type="text/javascript"
            src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
    <style type="text/css" src="static/css/main.css"></style>

    <script type="text/javascript">
        var ws;
        function init_user() {
            var myname = $("#myname").val()
            if (!myname) {
                return
            }

            var address = "ws://127.0.0.1:1234/second/say_upper?ws_user=" + myname

            ws = new WebSocket(address);
            ws.onopen = function () {
                $("#show").append("<br/> connected");
                //m = {"content":"CONNECTION","user":myname,"to_user":""}
                //ws.send($.toJSON(m));
            };
            ws.onmessage = function (evt) {
                $("#show").append("<br/>" + evt.data);
            };
            ws.onclose = function () {
                $("#show").append("<br/> connected");
            };

        }

        function sendMsg() {
            var content = $("#content").val()
            var user = $("#user").val()
            if (content) {
                $("#content").val("")
                if (user) {
                    msg = {"message":content, "ws_to_user":user}
                } else {
                    msg = {"message":content, "ws_to_user":"ws_all"}
                }

                //if(content == "close"){
                //   ws.close()
                //}else{
                ws.send($.toJSON(msg))
                //}
            } else {
                alert("no value")
            }

        }
    </script>
</head>
<body>
<input id="myname"/>
<input type="button" onclick="init_user()" value="setup"></input>

<div id="show"></div>
<br/>
<textarea style="width:300px" id="content"></textarea>
<br/>
<input id="user"/>
<button onclick='sendMsg()'>send</button>
</body>
</html>


